<script lang="tsx">
import type { ComponentSize } from 'element-plus'
import type { PropType } from 'vue'
import type { TableColumn } from '../types'
import { Rank, RefreshRight } from '@element-plus/icons-vue'
import {
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElIcon,
  ElTooltip,
} from 'element-plus'
import { defineComponent, unref } from 'vue'

const size = {
  default: '默认',
  large: '大',
  small: '小',
}

const sizeMap = ['default', 'large', 'small']

export default defineComponent({
  name: 'TableActions',
  props: {
    columns: {
      type: Array as PropType<TableColumn[]>,
      default: () => [],
    },
  },
  emits: ['refresh', 'changSize'],
  setup(props, { emit }) {
    const refresh = () => {
      emit('refresh')
    }

    const changSize = (size: ComponentSize) => {
      emit('changSize', size)
    }

    return () => (
      <>
        <div class="h-28px flex items-center justify-end text-right">
          <ElTooltip content="刷新" placement="top">
            <span onClick={refresh}>
              <ElIcon class="cursor-pointer hover:color-[var(--el-color-primary)]">
                <RefreshRight />
              </ElIcon>
            </span>
          </ElTooltip>

          <ElTooltip content="尺寸" placement="top">
            <ElDropdown trigger="click" onCommand={changSize}>
              {{
                default: () => {
                  return (
                    <span>
                      <ElIcon class="ml-8px mr-8px cursor-pointer hover:color-[var(--el-color-primary)]">
                        <Rank />
                      </ElIcon>
                    </span>
                  )
                },
                dropdown: () => {
                  return (
                    <ElDropdownMenu>
                      {{
                        default: () => {
                          return unref(sizeMap).map((v) => {
                            return (
                              <ElDropdownItem key={v} command={v}>
                                {size[v as keyof typeof size]}
                              </ElDropdownItem>
                            )
                          })
                        },
                      }}
                    </ElDropdownMenu>
                  )
                },
              }}
            </ElDropdown>
          </ElTooltip>
        </div>
      </>
    )
  },
})
</script>
